<template>
  <div class="list-box">
    <el-row class="row-box">
      <el-col
        :xs="24"
        :sm="24"
        :md="24"
        :lg="24"
        :xl="24"
        v-for="(item, index) in list"
        :key="index"
        class="list-item"
      >
        <NuxtLink :to="'/details/' + item.id + '.html'" target="_blank">
          <el-card shadow="hover" :body-style="{ padding: '10px', boxSizing: 'border-box' }">
            <div class="list-item-box">
              <h3 class="list-item-title">{{ item.name }}</h3>
              <div class="list-item-info">
                <div class="list-item-image" v-if="item.image_to">
                  <Image :url="item.image_to.http_url"></Image>
                </div>
                <div class="list-item-content">
                  <div class="list-item-description">{{ item.description }}</div>
                  <div class="list-item-buttom">
                    <div class="list-item-time">发布时间：{{ item.date_value }}</div>
                    <div class="list-item-tag" v-if="item.label_to.length">
                      <el-tag
                        v-for="(it, ind) in item.label_to"
                        :type="tagTypeList[ind % 4]"
                        :key="ind"
                        effect="dark"
                        >{{ it.name }}</el-tag
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-card>
        </NuxtLink>
      </el-col>
    </el-row>
    <div class="pagination-box">
      <Pagination
        :total="total"
        :pageSize="20"
        :currentPage="currentPage"
        @current-change="change"
      />
    </div>
  </div>
  <Empty v-if="list.length <= 0" />
</template>
<script setup lang="ts">
defineProps({
  list: {
    type: Array<any>,
    required: true,
    default: [],
  },
  total: {
    type: Number,
    required: true,
    default: 0,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
});
const tagTypeList: any = ['success', 'info', 'warning', 'danger'];
const emit = defineEmits(['change']);
const change = (val: number) => {
  emit('change', val);
};
</script>
<style lang="less" scoped>
@import './index.less';
</style>
